<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<script>

    // 问题1:
    // 函数封装  => 多参数传参 讲究一一对应,即便设置了默认参数  但是一旦后面的参数需要接收数值前面也不得不传

    // get("../php/isExistUser.php", "user=a123123", true, "json", function (data) { // 形式参数=> 请求成功时返回的数据
    //     console.log("请求成功", data);
    // })
    // get("../php/searchAllGrade.php", "user=a123123", true, "json", function (data) { // 形式参数=> 请求成功时返回的数据
    //     console.log("请求成功", data);
    // })

    // 解决方法
    // 将所有的参数整合到一个对象中  {url,data,async,dataType,success}, 对象根据键名取值 排名不分先后,解构过程中也可设置默认值

    // get({
    //     dataType: "json",
    //     // async:true,
    //     url: "../php/isExistUser.php",
    //     data: "user=a123123",
    //     success: function (data) { // 形式参数=> 请求成功时返回的数据
    //         console.log("请求成功", data);
    //     }
    // })
    // get({
    //     url: "../php/searchAllGrade.php",
    //     // data:"",
    //     // async:true,
    //     dataType: "json",
    //     success: function (data) {
    //         console.log("grade请求成功", data);
    //     }
    // })

    // 问题二:
    // 参数数据还是需要自己拼接  => 太麻烦?    (参数数据:键值对形式存在,排名不分先后)
    // 解决方法:  可以传入一个对象作为参数  => 解析该对象  => 参数数据队列
    // {user,pwd,phone,email}  => "user=a123123&pwd=123123&phone=17386141517&email=123123@qq.com"


    /* post({
        url: "../php/register.php",
        data: {
            user: "a123123",
            pwd: 123123,
            phone: 17386141517,
            email: "1738614@qq.com"
        },
        // async:true,
        dataType: "json",
        success: function (data) {
            console.log("请求成功", data);
        }
    }) */


    post({
        url: "../php/login.php",
        data: {
            user: "a123123",
            pwd: 123123,
        },
        // async:true,
        dataType: "json",
        success: function (data) {
            console.log("登录请求成功", data);
        }
    })


    // 解决方法
    // 将所有的参数整合到一个对象中  {url,data,async,dataType,success}, 对象根据键名取值 排名不分先后,解构过程中也可设置默认值
    // url       请求的地址
    // data      请求的数据  (string/object)
    // async     是否异步
    // dataType  接口返回的数据类型
    // success        请求成功时执行的回调函数(提前订好了请求成功时要执行的内容(回调函数有一个形式参数接收数据),请求成功时执行)
    function post(options) {  //  {url,data,async,dataType,success}

        var { url, data = "", async = true, dataType = "text", success } = options;

        if (data instanceof Object) {  // 此方法不准确 (且听下回分解)   可以传入一个对象作为参数  => 解析该对象  => 参数数据队列
            var list = [];
            for (var key in data) {
                var val = data[key];
                var item = key + "=" + val;
                list.push(item);
            }
            console.log(list);

            var data = list.join("&");
            console.log(data);
        }


        var xhr = new XMLHttpRequest();

        // data ? url + "?" + data : url  有数据 就拼接,否则直接请求
        xhr.open("post", url, async);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                if (dataType == "json") {
                    result = JSON.parse(result);
                }
                // console.log(result);

                if (success) {
                    success(result);
                }

                /* var { status, msg } = result;
        
                if (status) {
                    userSpan.textContent = "√";
                    userSpan.className = "right";
                    isUserOk = true;
                } else {
                    userSpan.textContent = "用户名已存在";
                    userSpan.className = "err";
                } */

            }
        }
    }




</script>

</html>